import { useState } from 'react';
import { Button, Space, Form, Row, Col, Input, Table, Select, Popconfirm } from 'antd';
import { PAGINATION_CONFIG } from '@/constants';
import type { QueryBigCarListParams, BigCar } from './services';
import { BigCarStatus, queryChargeList, upStatus } from './services'
import { useRequest } from 'ahooks';
import type { ColumnsType } from 'antd/es/table/interface';
import { enum2options } from '@/utils/enum2options';
import { Access } from '@umijs/max';
import EditModal, { EditModalProps } from './components/EditModal';

const BigCarPage: React.FC<RoutePageProps> = () => {
  const [searchForm] = Form.useForm<QueryBigCarListParams>()
  const [searchParams, setSearchParams] = useState<QueryBigCarListParams>({
    pageNum: 1, pageSize: 10,
  })
  const list = useRequest(() => queryChargeList(searchParams), {
    refreshDeps: [searchParams],
  })
  const { runAsync: delAsync } = useRequest(upStatus, {manual: true})
  const [editModalProps, setEditModalProps] = useState<EditModalProps>({
    open: false
  })

  const onFinish = (formValues: any) => {
    setSearchParams({
      ...searchParams,
      ...formValues,
      pageNum: 1,
    })
  }

  const onEditModalCancel = (refresh: boolean) => {
    if (refresh) list.refresh()
    setEditModalProps({open: false})
  }

  const columns: ColumnsType<BigCar> = [
    {
      title: '车牌号',
      dataIndex: 'carPlat',
      width: 120,
    },
    {
      title: '车辆别名',
      dataIndex: 'infoName',
      width: 120,
      render: val => val || '--',
    },
    {
      title: 'vin码',
      dataIndex: 'vin',
      width: 120,
      render: val => val || '--',
    },
    {
      title: '状态',
      dataIndex: 'status',
      width: 120,
      render: val => BigCarStatus[val]
    },
    {
      title: '操作',
      key: 'operation',
      fixed: 'right',
      width: 180,
      render: (_, record) => {
        return <Space>
          <a onClick={() => setEditModalProps({open: true, type: 'edit', record})}>编辑</a>
          <Access accessible={record.status === BigCarStatus.启用}>
            <Popconfirm
              title={`确定禁用该车辆吗?`}
              onConfirm={() => delAsync({companyCarId: record.id, status: 2}).then(list.refresh)}
              okText="禁用"
              cancelText="取消"
            >
              <a>禁用</a>
            </Popconfirm>
          </Access>
          <Access accessible={record.status === BigCarStatus.禁用}>
            <Popconfirm
              title={`确定启用该车辆吗?`}
              onConfirm={() => delAsync({companyCarId: record.id, status: 1}).then(list.refresh)}
              okText="启用"
              cancelText="取消"
            >
              <a>启用</a>
            </Popconfirm>
          </Access>
          <Popconfirm
            title={`确定删除该车辆吗?`}
            onConfirm={() => delAsync({companyCarId: record.id, status: 3}).then(list.refresh)}
            okText="删除"
            cancelText="取消"
          >
            <a>删除</a>
          </Popconfirm>
        </Space>
      }
    }
  ]
  
  return (
    <div className='container'>
      <div className="card search-card">
        <div className="toolbar">
          <Space>
            <Button type='primary' onClick={() => setEditModalProps({open: true, type: 'add'})}>添加车辆</Button>
          </Space>
        </div>
        <div className="form-area">
          <Form name='searchBigCarForm' form={searchForm} onFinish={onFinish}>
            <Row gutter={[20, 20]}>
              <Col span={6}>
                <Form.Item label='车牌号' name='carPlat'>
                  <Input placeholder='请输入' />
                </Form.Item>
              </Col>
              <Col span={6}>
                <Form.Item label='状态' name='status'>
                  <Select placeholder='请选择' options={enum2options(BigCarStatus)} allowClear style={{width: '100%'}} />
                </Form.Item>
              </Col>
              <Col span={6}>
                <Form.Item label='vin码' name='vin'>
                  <Input placeholder='请输入' />
                </Form.Item>
              </Col>
              <Col span={6}>
                <Space>
                  <Button type='primary' htmlType='submit' loading={list.loading}>筛选</Button>
                  <Button htmlType='reset'>重置</Button>
                </Space>
              </Col>
            </Row>
          </Form>
        </div>
      </div>
      <div className="card content-card">
        <Table<BigCar>
          rowKey='id'
          loading={list.loading}
          dataSource={list.data?.data}
          columns={columns}
          scroll={{y: 700, x: 'max-content'}}
          pagination={{
            ...PAGINATION_CONFIG,
            current: searchParams.pageNum,
            pageSize: searchParams.pageSize,
            total: list.data?.totalCount || 0,
            onChange: (page, pageSize) => {
              setSearchParams({
                ...searchParams,
                pageNum: page === searchParams.pageNum ? 1 : page,
                pageSize,
              })
            }
          }}
        />
      </div>
      <EditModal
        {...editModalProps}
        onCancel={onEditModalCancel}
      />
    </div>
  );
};

export default BigCarPage;
